<template>
  <view class='productList'>
    <StatusNav :properties="statusNavProperties"/>
    <uv-sticky :zIndex="999" :customNavHeight="stickyTop" :offsetTop="stickyTop" bgColor="#fff">
      <view class="sortClass">
        <view class="sortClass-item" v-for="item in sortList" @click="sortClick(item.value)" :style="{
                      display: 'flex',
                      color: sortActive === item.value? themConfig.theme.color:'#333'
                    }">
          {{ item.name }}
          <uv-icon v-if="item.icon" :name="item.icon" :color="sortActive === item.value? themConfig.theme.color:'#333'"
                   size="15"></uv-icon>
        </view>
      </view>
    </uv-sticky>
    <uv-gap height="10" v-if="orderData.length > 0" bgColor=""></uv-gap>

    <view v-if="sortActive==='all' && orderData.length > 0" v-for="(item,index) in orderData">
      <OrderList :isLast="index===orderData.length-1" @acctOrder="refreshList" :datas="[item]"/>
    </view>

    <view v-if="orderData.length > 0 && sortActive==='his'" v-for="(item,index) in orderData">
      <OrderList :isLast="index===orderData.length-1" @acctOrder="refreshList" :datas="[item]">
        <template v-slot:head>
          <view class="left">
            <view class="avatar">
              <uv-avatar size="42" src=""></uv-avatar>
            </view>
            <view class="name">
              <view class="uName">
                <uv-tags size="mini" v-if="item.marketTag" v-for="tag in item.marketTag" :text="tag" type="error"></uv-tags>
                <view>{{ item.orderName }}</view>
              </view>
              <view class="time">
                {{ item.timeBelongFormat }}
              </view>
            </view>
          </view>
          <view class="center">
            <slot name="orderAmountValue">
              <view class="money" :style="{
                  color: themConfig.theme.color
                }">
                <text>酬金：</text>
                <text class="amountValue">{{ item.amount }}</text>
                <text>元</text>
              </view>
            </slot>
          </view>
        </template>
        <template v-slot:operate>
          <view style="text-align: right">
            <text style="font-size: 13px;color: #909399">{{ item.schoolName }}</text>
          </view>
        </template>

        <template v-slot:cancel-reason>
          <text style="width: 1px"></text>
        </template>

        <template v-slot:address>
          <view class="address">
            <view class="actionAddress">
              <uv-steps activeColor="#606266" direction="column" current="0"
                        activeIcon="https://minio.thisforyou.cn:1443/test/起点-copy.png"
                        inactiveIcon="https://minio.thisforyou.cn:1443/test/终点.png">
                <uv-steps-item :iconSize="25" title="**********"></uv-steps-item>
                <uv-steps-item :iconSize="25" title="**********"></uv-steps-item>
              </uv-steps>
            </view>
          </view>
        </template>

        <template v-slot:body>
          <text style="width: 1px"></text>
        </template>

      </OrderList>

      <uv-gap height="10"/>
    </view>

    <Empty :show="orderData.length<=0"/>

    <uv-load-more v-if="isReachBottom" @loadmore="loadmore" :status="loading.status"
                  :loading-text="loading.loadingText" :loadmore-text="loading.loadmoreText"
                  nomore-text=" "/>
    <uv-gap height="10" v-if="isReachBottom" bgColor=""></uv-gap>

    <Tabar :app="getAapp()" :activeIndex="1" ref="tabbar"/>
  </view>
</template>
<script>
import StatusNav from '@/components/school/statusNav';
import OrderList from '@/components/school/orderList';
import {mapGetters} from "vuex";
import * as OrderApi from '@/api/school/order.js';
import diyJson from '@/config/diy.js';

const app = getApp();

export default {
  computed: mapGetters(['uid', 'schoolId']),
  components: {
    StatusNav,
    OrderList,
  },
  data() {
    return {
      // #ifdef H5
      stickyTop: 0,
      // #endif
      // #ifdef MP
      stickyTop: 44,
      // #endif
      themConfig: diyJson.commonStyle,
      sortActive: 'all',
      sortList: [
        {
          "name": "最新跑腿订单",
          "value": 'all'
        },
        {
          "name": "历史订单",
          "value": 'his'
        }
      ],

      statusNavProperties: { // 筛选条件
        title: "抢单池",
        setStyle: diyJson.statusbar.setStyle
      },

      loading: {
        status: 'nomore',
        loadingText: '加载中',
        loadmoreText: '点击加载更多',
      },

      searchParams: {
        size: 10,
        schoolId: this.schoolId
      },
      orderData: [],
      isReachBottom: false,
      dataPage: {
        nextId: undefined,
        ext: undefined
      }
    };
  },
  onPullDownRefresh() {
    this.loading.status = 'nomore';
    this.setOrderBy(this.sortActive);
    if (this.orderData.length > 0) {
      this.orderData.splice(0, 1);
    }
    this.dataList();
    uni.stopPullDownRefresh();
  },
  onLoad: function (options) {

  },
  onShow() {
    this.setOrderBy(this.sortActive);
    this.dataList();
  },

  methods: {

    refreshList() {
      this.orderData.splice(0, 1);
      this.dataList();
    },

    // 点击排序
    sortClick(val) {
      this.sortActive = val;
      this.setOrderBy(val);
      this.loading.status = 'nomore';
      this.dataList();
    },

    setOrderBy(val) {
      if (val === 'all') {

      }
    },

    dataList() {
      if (this.sortActive === 'all') {
        OrderApi.orderList({...this.searchParams, schoolId: this.schoolId}).then(res => {
          this.orderData = res.data.records;
          this.dataPage.ext = res.data.ext;
          this.dataPage.hasNext = res.data.hasNext;
          if (res.data.nextId) {
            this.dataPage.nextId = res.data.nextId;
          }
        })
      } else {
        OrderApi.getHistoryOrder({schoolId: this.schoolId}).then(res => {
          this.orderData = res.data.records;
          this.dataPage.ext = res.data.ext;
          this.dataPage.hasNext = res.data.hasNext;
          if (res.data.nextId) {
            this.dataPage.nextId = res.data.nextId;
          }
        })
      }
    },

    getAapp() {
      return app;
    },
    goback() {
      // #ifdef H5
      return history.back();
      // #endif
      // #ifndef H5
      return uni.navigateBack({
        delta: 1,
      })
      // #endif
    },
    // 滚到底部
    scrolltolower() {
      this.loading.status = 'nomore';
      this.isReachBottom = true;
      if (this.dataPage.hasNext) {
        this.loading.status = 'loadmore';
      }
    },
    loadmore() {
      if (this.dataPage.hasNext) {
        this.loading.status = 'loading';
        if (this.sortActive === 'all') {
          OrderApi.orderList({...this.searchParams, schoolId: this.schoolId, nextId: this.dataPage.nextId}).then(res => {
            res.data.records.forEach(item => {
              this.orderData.push(item)
            })
            this.dataPage.ext = res.data.ext;
            this.dataPage.hasNext = res.data.hasNext;
            if (res.data.nextId) {
              this.dataPage.nextId = res.data.nextId;
            }
            this.loading.status = 'loadmore';
          })
        } else {
          OrderApi.getHistoryOrder({schoolId: this.schoolId, nextId: this.dataPage.nextId}).then(res => {
            res.data.records.forEach(item => {
              this.orderData.push(item)
            })

            this.dataPage.ext = res.data.ext;
            this.dataPage.hasNext = res.data.hasNext;
            if (res.data.nextId) {
              this.dataPage.nextId = res.data.nextId;
            }
            this.loading.status = 'loadmore';
          })
        }

      }
    },
  },
  onReachBottom() {
    this.scrolltolower();
  }
}
</script>

<style scoped lang="scss">
.sortClass {
  padding: 10px 20px;
  display: flex;
  justify-content: center;

  .sortClass-item {
    margin: 0 40px;
    text-align: center !important;
  }
}

@import 'index';

</style>
